<template>
	<view class="mainpadding beijingse1">
		<view class="" style="padding-bottom: 300rpx;">
			<!-- 分类 -->
			<view class="flexleft">
				<!-- 左侧 -->
				<view class="left_box">
					<view :class="leftcurrentid==item.id?'xuanzbox':'weixbox'" v-for="item in leftListAll" :key="item.id" @click="changeleft(item)">{{item.name}}</view>
				</view>
				<!-- 右侧 -->
				<view class="rightbox">
					<view class="" v-for="item in rightListAll" :key="item.id">
						<view class="flexbetween margin_top" @click="jumpdetail('/pages_homepage/lipinlb?id=0&category_id=',item.id)">
							<view class="titletext xiaohuang bold">{{item.name}}</view>
							<u-icon name="arrow-right" color="#C8C8C8"></u-icon>
						</view>
						<view class="flexleft flex_wrap">
							<view class="ershiw flexcolumn margin_top" v-for="ite in item.childlist" :key="ite.id" @click="jumpdetail('/pages_homepage/lipinlb?id=0&category_id=',ite.id)">
								<image class="itemimg" :src="ite.image_text" mode=""></image>
								<view class="xiaohei yhxk strongtext margin_top1 textcenter" style="width: 100rpx;">{{ite.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				leftListAll: [],
				rightListAll: [],
				leftcurrentid:""
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/goodscl/goodsCategory', 'GET', {}).then(res => {
					this.leftListAll = res.data
					this.rightListAll = res.data[0].childlist
					this.leftcurrentid = res.data[0].id
				})
			},
			changeleft(item){
				this.rightListAll = item.childlist
				this.leftcurrentid = item.id
			},
			// 跳转商品详情
			tzspxq(id) {
				uni.navigateTo({
					url: '/pages_homepage/shangpinxq?id=' + id
				})
			},
			chengeClass(item) {
				if (this.classId == item.id) {
					return false
				}
				this.classId = item.id
				this.getshoplist()
			},

		}
	}
</script>

<style lang="scss" scoped>
	.itemimg{
		width: 100rpx;
		height: 100rpx;
	}
	.ssbox {
		width: 64%;
		padding: 12rpx 23rpx;
		background: #FFFFFF;
		border-radius: 51rpx 51rpx 51rpx 51rpx;
	}

	.sanjx {
		width: 14.86rpx;
		height: 14.86rpx;
	}

	.lpbox {
		padding: 12rpx 28rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
	}

	.shilitu {
		width: 124rpx;
		height: 124rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		image {
			border-radius: 14rpx 14rpx 14rpx 14rpx;
			width: 100%;
			height: 100%;
		}
	}

	.beijingse1 {
		background-color: #f5f5f5;
		min-height: calc(100vh - 140rpx);
		height: auto;
	}

	.weixbox {
		padding: 30rpx;
		font-size: 24rpx;
		background-color: #F9F9F9;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.xuanzbox {
		padding: 30rpx;
		border-left: 4rpx solid #f57d41;
		font-size: 24rpx;
		background-color: #fff;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.rightbox {
		position: fixed;
		left: 175rpx;
		/* #ifdef H5 */
		top: 120rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		padding: 5rpx 30rpx 30rpx;
		box-sizing: border-box;
		width: 74%;
		height: calc(100vh);
		overflow-y: auto;
		padding-bottom: 100rpx;
		background-color: #FFFFFF;
	}

	.left_box {
		padding-bottom: 100rpx;
		position: fixed;
		left: 0;
		/* #ifdef H5 */
		top: 120rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		top: 0;
		/* #endif */
		width: 23%;
		height: calc(100vh);
		overflow-y: auto;
		background: #F9F9F8;
		box-sizing: border-box;
	}

	.lline {
		width: 1rpx;
		height: 35rpx;
		background-color: #DDDDDD;
	}
</style>